<template>
  <div class="user_container">
    <div class="info">
      <van-image round width="64" height="64" :src="userInfo.photo" />
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#0097fa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <van-row class="user_hobby">
      <van-col span="8">
        <van-icon name="newspaper-o" color="#7fbdff" />
        <br />
        我的作品
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" color="#ff060d" />
        <br />
        我的收藏
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" color="#ffa959" />
        <br />
        阅读历史
      </van-col>
    </van-row>
    <van-cell-group>
      <van-cell title="编辑资料" size="large" is-link to="/edit" icon="edit" />
      <van-cell
        title="小智同学"
        size="large"
        is-link
        to="/student"
        icon="chat-o"
      />
      <van-cell title="系统设置" size="large" is-link icon="setting-o" />
      <van-cell
        title="退出登陆"
        size="large"
        is-link
        icon="warning-o"
        @click="logoutClick"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserInfo } from "./user.js";
import { removeToken } from "@/utils/token";
export default {
  name: "user",
  data() {
    return {
      // userInfo: {}
    };
  },
  async created() {
    let res = await getUserInfo();
    // this.userInfo = res.data.data;
    this.$store.commit("updateUserInfo", res.data.data);
  },
  methods: {
    logoutClick() {
      this.$dialog
        .confirm({
          title: "嘤嘤嘤",
          message: "你真的要退出吗"
        })
        .then(() => {
          removeToken();
          this.$router.push({ path: "/home" });
          this.userInfo = {};
        })
        .catch(() => {
          console.log(111);
        });
    }
  },
  computed: {
    ...mapState(["userInfo"])
  }
};
</script>

<style lang="less">
.user_container {
  .info {
    height: 100px;
    display: flex;
    align-items: center;
    background-color: #0097fa;
    .van-image {
      padding: 0 14px;
    }
    h2 {
      font-size: 16px;
      font-weight: normal;
      .van-tag {
        margin-top: 8px;
      }
    }
  }
  .van-col {
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    .van-icon {
      font-size: 28px;
    }
  }
}
</style>
